<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车服租赁后台管理-首页</title>
    <!-- 导入vue -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">
            <el-menu style="height: 97vh;"
                     default-active="1-1"
                     class="el-menu-vertical-demo"
                     @select="handleMenuItemClick">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <a>基础信息管理</a>
                    </template>
                    <el-menu-item index="1-1">
                        <i class="el-icon-coin"></i>
                        <span>车辆类型管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                        <i class="el-icon-guide"></i>
                        <span>车辆管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-3">
                        <i class="el-icon-notebook-1"></i>
                        <span>车辆保养记录</span>
                    </el-menu-item>
                    <el-menu-item index="1-4">
                        <i class="el-icon-truck"></i>
                        <span>车辆维修记录</span>
                    </el-menu-item>
                    <el-menu-item index="1-5">
                        <i class="el-icon-set-up"></i>
                        <span>车辆事故记录</span>
                    </el-menu-item>
                    <el-menu-item index="1-6">
                        <i class="el-icon-timer"></i>
                        <span>车辆年检记录</span>
                    </el-menu-item>
                    <el-menu-item index="1-7">
                        <i class="el-icon-document"></i>
                        <span>车辆保险记录</span>
                    </el-menu-item>

                </el-submenu>
                <!-- 操作日志记录 -->
                <el-menu-item index="2">
                    <i class="el-icon-date"></i>
                    <span>操作日志管理</span>
                </el-menu-item>
                <!-- 退出 -->
                <el-menu-item index="3" @click="logout">
                    <i class="el-icon-switch-button"></i>
                    <span>退出系统</span>
                </el-menu-item>
            </el-menu>

        </el-aside>
        <el-main>
            <iframe name="content" :src="url" width="99%" height="99%" style="border: none"></iframe>
        </el-main>
    </el-container>

</div>
<script type="text/javascript">

    let vm = new Vue({
        el: "#app",
        data() {
            return {
                url: "basic/car-type.html",
                //创建一个页面链接对象
                urls:{
                    "1-1":"basic/car-type.html",
                    "1-2":"basic/car.html",
                    "1-3":"basic/car-maintenance.html",
                    "1-4":"basic/car-repair.html",
                    "1-5":"basic/car-accident.html",
                    "1-6":"basic/car-annual-year.html",
                    "1-7":"basic/car-insurance.html",
                    "2":"log.html"
                }
            }
        },
        methods: {
            //选中菜单栏栏目
            handleMenuItemClick(index){
                console.log(index);
                //修改链接
                this.url = this.urls[index];
            },
            //退出
            logout() {
                this.$confirm('真的要退出吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    //访问服务器进行退出
                    location.href = "/user/logout";
                }).catch(() => {
                });
            }
        }
    });
</script>
</body>
</html>